<template>
    <div class="content-box">
        <div class="content-title-box main_center">
            <slot />
            <div class="title-box">
                <el-row :gutter="10">
                    <slot name="list-search" :search="search" />
                </el-row>
            </div>
        </div>
        <div class="list-size-box">
            <span class="list-size">共计<span>{{ paging.total }}</span>项</span>
            <span class="list-size">已选中<span>{{ checkedItemSize }}</span>项</span>
        </div>
        <div class="content main_center" style="display: block">
            <el-table :data="tableData" @selection-change="selectionChange" height="558" ref="deviceTable">
                <slot name="table-column" />
            </el-table>
            <el-pagination background layout="total, prev, pager, next" :page-size="10" :total="paging.total"
                @current-change="changePage" style="margin-top: 10px;text-align: center">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { log } from 'three';
import {getMonitorList} from '../../url/api';
import JSONDATA from './monitorData.json';
export default {
    name: 'device_list',
    props: {
        search: {
            type: Object,
            default: () => ({
                location: [],
            }),
        },
        dataProcessing: {
            type: Function,
            default: () => {},
        },
    },
    watch:{
        search:{
            handler(val){
                this.formSearch.name = val.deviceName;
                // console.log(this.formSearch.name);
                // this.throttle(this.getTableData(),100)
                this.getTableData()
            },
            deep: true,
        }
    },
    data() {
        return {
            paging: {
                total: 0,
                page: 1,
                pageSize: 10,
            },
            tableData: [],
            checkedItemSize: 0,
            formSearch:{
              xqId:sessionStorage.getItem('orgId'),
              current:1,
              size:10,
            }
        };
    },
    methods: {
        getSelectedDevice() {
            return this.$refs.deviceTable.selection;
        },
        selectionChange(selection) {
            this.checkedItemSize = selection.length;
        },
        getTableData() {
            /* 
          http://10.18.128.45:7086/live/cameraid/1000004%24197/substream/2.m3u8
          
          */
         this.throttle(getMonitorList(this.formSearch).then((resp) => {
                this.tableData = resp.data.data.records;
                this.paging.total = resp.data.data.total;
            }),500)
            // console.log(JSONDATA)
            this.tableData = JSONDATA.data.records;

            
        },
        changePage(page) {
            this.paging.page = page;
            this.formSearch.current = page;
            this.getTableData();
            this.$emit('changePageNum', page);
        },
    },
    mounted() {
        this.getTableData();
    },
};
</script>

<style scoped lang="scss">
.content-box {
    padding: 0;
    height: calc(100% + 20px);
    display: block;
    width: 100%;
}

.content-title-box {
    width: auto;
}

.content-box > .content {
    width: auto;
    height: auto;
}

.main_center {
    padding: 10px;
    border-radius: 5px;
}
.list-size-box {
    width: max-content;
    margin: 10px 10px 5px 10px;
}

.list-size {
    font-weight: 400;
    font-size: 14px;
    margin-right: 40px;
}

.list-size span {
    margin: 0 10px;
    font-weight: 400;
    font-size: 24px;
}

.title-box /deep/ .el-select {
    width: 80px;
    margin-left: 2px;
}
/deep/ .el-table th.el-table__cell:first-child > .cell {
    padding: 0 14px;
}

/deep/ .el-table .el-table__row td:last-child {
    padding: 9px 0;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 5px;
}
</style>
